<template>
	<!-- 问题库 -->
	<view class="main">
		<topCommonTitleBar :statePerchHeight="'var(--status-bar-height)'" :autoBack="true" title="问题库"
			backgroundColor="#0157FC" titleSize="40rpx" :statePerch="true" arrow="white" />
		<view class="topSearch">
			<u-search placeholder="输入您想了解的内容" :disabled="true" :showAction="false" @click="jumpSearch"
				placeholderColor="#BCBCBC"></u-search>
		</view>
		<view class="content">
			<view class="top_bar">
				<view class="top_left">
					<view class="time" :class="active == 1 ? 'active' : ''" @click="toggle(1)">发布时间</view>
					<view class="viewNum" :class="active == 2 ? 'active' : ''" @click="toggle(2)">浏览量</view>
				</view>
				<view class="screen" @click="onClickScreen">
					<image class="screen_icon" src="../../static//img/wenTiKu/screen_icon.png" />
					筛选
				</view>
			</view>
			<scroll-view class="list" style="height: calc(100vh - 440rpx)" :scroll-y="true" :scroll-top="scrollTop"
				refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="reload" @scrolltolower="loadMore">
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="toInfo(item.id)">
					<view class="item_title ellipsis2">{{ item.title }}</view>
					<view class="item_txt">
						<view class="ellipsis2 txt" v-html="item.answer_content"></view>
						<text class="item_info" v-if="item.answer_content.length > 50">详情</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="showScreen" mode="right" @close="showScreen = false" closeable>
			<scroll-view style="height: calc(100vh - 240rpx)" scroll-y="true" class="showScreen">
				<u-collapse accordion :border="false" @change="onChange" :value="-1">
					<template v-for="(item, index) in collapseItems">
						<u-collapse-item :title="item.title" ref="collapseItem">
							<view :key="index" class="screen_item">
								<view v-for="(subItem, subIndex) in item.list" :key="subIndex" class="item_tag"
									:class="{ selected: filterId == subItem.id }" @click="chooseTag(subItem, subIndex)">
									{{ subItem.name }}
								</view>
							</view>
						</u-collapse-item>
					</template>
				</u-collapse>
			</scroll-view>
		</u-popup>
		<view v-show="showPopup">
			<u-modal :show="showPopup" :showCancelButton="true" title="温馨提示" width="580rpx" @confirm="goPlatform()"
				@cancel="showPopup = false" confirmText="加入会员" :content="tipsMsg"></u-modal>
		</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/problemBase"></script>

<style lang="scss">
.main {
	width: 100%;
	height: 100%;

	.topSearch {
		background: #0157FC;
		padding: 45rpx 30rpx 75rpx 30rpx;
	}

	.content {
		padding: 30rpx 30rpx 0 30rpx;
		background-color: #FFFFFF;
		margin-top: -30rpx;
		z-index: 999;
		border-radius: 40rpx;

		.top_bar {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top_left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.time,
				.viewNum {
					font-size: 30rpx;
					color: #999;
					position: relative;
					font-size: 30rpx;
				}

				.viewNum {
					margin-left: 83rpx;
				}

				.active {
					font-weight: 600;
					color: #333333;

					&::before {
						content: '';
						display: block;
						width: 45rpx;
						height: 4rpx;
						background-color: #0157FC;
						position: absolute;
						bottom: -30%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

			.screen {
				font-size: 30rpx;
				color: #333333;

				.screen_icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.list {
			margin-top: 48rpx;

			.item {
				border-bottom: 2rpx solid #E7E7E7;
				padding-bottom: 40rpx;
				margin-bottom: 40rpx;

				&:last-child {
					border-bottom: none;
					padding-bottom: 0;
					margin-bottom: 0;
				}

				.item_title {
					font-size: 30rpx;
					font-weight: 600;
					color: #3D3D3D;
					line-height: 43rpx;
				}

				.item_txt {
					margin-top: 11rpx;
					font-size: 22rpx;
					color: #666666;
					line-height: 32rpx;
					position: relative;

					.txt {
						height: 64rpx;

						p {
							img {
								display: none !important;
							}
						}
					}

					.item_info {
						background: #fff;
						padding: 5rpx;
						color: #4291FF;
						position: absolute;
						right: 0;
						bottom: -5rpx;

						&::before {
							content: ' ...';
							position: absolute;
							bottom: 5rpx;
							left: -38rpx;
							padding: 0 10rpx;
							background: linear-gradient(to right, transparent, #fff 0%);
							color: #666666;
						}
					}
				}
			}
		}
	}

	.showScreen {
		width: 648rpx;
		height: 100vh;
		padding: 100rpx 0;
		padding-top: 160rpx;

		.screen_item {
			font-size: 34rpx !important;
			min-width: 180rpx;
			display: flex;
			flex-wrap: wrap;

			.item_tag {
				width: auto;
				padding: 10rpx 20rpx;
				margin-top: 20rpx;
				text-align: center;
				border: 1rpx solid #e1e1e1;
				border-radius: 100rpx;
				font-size: 28rpx;
				color: #333333;
				margin-right: 20rpx;
			}

			.selected {
				color: #428cf3;
				background-color: #eef5ff;
			}
		}
	}
}

/deep/.u-collapse-item__content__text {
	width: 558rpx !important;
	display: flex;
	flex-wrap: wrap !important;
	flex-direction: initial !important;
}

/deep/.u-popup__content__close--top-right {
	margin-top: 60rpx;
}

/deep/.u-cell__title-text {
	font-size: 36rpx;
}
</style>
